import React, { Component } from 'react';
import './CommodityDetails.scss'
import { good_goodinfo,shopcart_add } from '../utils/api'
import { Swiper,Button,Toast } from "antd-mobile";
class CommodityDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detailsInfo: {}
        }
    }
    componentDidMount() {
        good_goodinfo({ goodid: this.props.location.state.id }).then((res) => {
            console.log(res.data.goodinfo);
            this.setState({
                detailsInfo: res.data.goodinfo
            })
        })
    }
    addcar(){
      if(localStorage.token){
        shopcart_add({userid:localStorage.getItem('userid'),goodid:this.props.location.state.id}).then((res)=>{
            console.log(res);
          })
      }
      }
    return() {
        this.props.history.go(-1)
    }

    render() {
        return (
            <div className='CommodityDetails'>
                <div className="head">
                    <div className="hdtop">
                        <div className="hdlft">
                            <span className='iconfont icon-fanhui' onClick={() => { this.return() }}></span>
                            <span className='iconfont icon-shouye'></span>
                        </div>
                        <div className="topz">商品详情</div>
                        <div className="topr">
                            <div className='tb'>
                                <span className="iconfont icon-dian"></span> |
                                <span className="iconfont icon-icon-yuanxk
"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div >
                    <Swiper loop autoplay
                        className="lunbo">
                        {
                            this.state.detailsInfo.pics &&
                            this.state.detailsInfo.pics.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item} alt="" />
                                    </Swiper.Item>
                                );
                            })}
                    </Swiper>
                </div>

                <div className="info">
                    <div className="pinpai">{this.state.detailsInfo.brand}</div>
                    <div className='miaoshu'>{this.state.detailsInfo.description}</div>
                    <div className='fuli'>
                       {
                        this.state.detailsInfo.activityTags && 
                        this.state.detailsInfo.activityTags.map((item,index)=>{
                            return (
                                <div className="flbox" key={index}>{item}</div>
                            )
                        })
                       }
                    </div>
                    <div className="name">
                        <div className="pinname">{this.state.detailsInfo.name}</div>
                    </div>
                </div>


              <div className="bar">
                <div className="cat">
                    <div className="catbx">
                        <span className='iconfont icon-shoucang'></span>
                        收藏
                    </div>
                    <div className="catbx">
                        <span className='iconfont icon-fenxiang'></span>
                        分享
                    </div>
                    <div className="catbx">
                        <span className='iconfont icon-gouwuche'></span>
                        购物车
                    </div>
                </div>
                <div className="btn">
                <Button color='warning' onClick={()=>{this.addcar(Toast.show({icon:'success',content:'成功加入购物车'}))}}>加入购物车</Button>
                <Button color='danger'>立即购买</Button>         
                </div>
              </div>

            </div>
        );
    }
}

export default CommodityDetails;